<script setup>
import axios from 'axios'
import { getToken } from '@/utils/auth'
import { ElMessage, ElMessageBox } from 'element-plus'

const fileList = ref([
  {
    name: 'element-plus-logo.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg'
  },
  {
    name: 'element-plus-logo2.svg',
    url: 'https://element-plus.org/images/element-plus-logo.svg'
  }
])

const handleRemove = (file, uploadFiles) => {
}

const handlePreview = (uploadFile) => {
}

const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(`确定删除${uploadFile.name} ?`).then(
    () => true,
    () => false
  )
}
// 导出下载
const handleExport = () => {
  const base_url = import.meta.env.VITE_API_DOMAIN
  const url = `${base_url}download`
  const data = {}
  axios
    .post(url, data, {
      headers: {
        Authorization: 'Bearer ' + getToken(),
      },
      responseType: 'blob',
      timeout: 100000
    })
    .then((response) => {
      const blob = new Blob([response.data], {
        type: 'application/vnd.ms-excel'
      })
      const a = document.createElement('a')
      const fileName = parseTime(new Date())
      a.href = URL.createObjectURL(blob)
      a.download = `${fileName}.xls`
      a.style.display = 'none'
      document.body.appendChild(a)
      a.click()
      a.remove()
    })
}
</script>

<template>
  <div class="app-container">
    <div class="flex">
      <div class="w-1/3">
        <el-upload
          v-model:file-list="fileList"
          class="upload-demo"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-exceed="handleExceed"
        >
          <el-button type="primary">点击上传</el-button>
          <template #tip>
            <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
          </template>
        </el-upload>
      </div>
      <div class="ml-8">
        <el-button type="primary" @click="handleExport">导出excel</el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
